<!doctype html>
<meta charset="utf-8">
<title>Live URL Viewer</title>
<link rel="stylesheet" href="style.css">
<script>
"use strict";
// Stub out SharedArrayBuffer so that the whatwg-url module can load in browsers despite lack of cross-origin isolation.
globalThis.SharedArrayBuffer = class {
  get byteLength() { return 0; }
  get growable() { return false; }
};
</script>
<script type="module" src="live-viewer.mjs"></script>

<h1>Live URL Viewer</h1>

<p>The output below will display a URL's parsed components from the browser versus those given by <a href="https://github.com/jsdom/whatwg-url">jsdom/whatwg-url</a>.

<p>jsdom/whatwg-url closely follows the <a href="http://url.spec.whatwg.org/">URL Standard</a> and the associated <a href="https://github.com/w3c/web-platform-tests/tree/master/url">web-platform-tests</a>, so this
serves as a good comparison versus the standard itself.

<p>The output will be colored <span class="pass">dark green</span> unless a difference occurs between the two parsers in which case the affected URL component will be colored <span class="fail">red</span>.

<form>
  <label for="input">Input:</label>
  <input id="input" value="https://example.com/" autofocus>

  <label for="input-escaped">Input with escapes:</label>
  <input id="input-escaped" value="https://example.com/">

  <label for="base">Base URL:</label>
  <input id="base" value="about:blank">
</form>

<details>
  <summary>How do I use "Input with escapes?"</summary>

  <p>Most of the time, you don't need to worry about this. But if you want to test characters outside of the U+0021 (!) through U+007E (~) range, which can be harder to input or to visually distinguish, you can use this field. Any strings of the form <samp>\u{<var>number</var>}</samp> will be decoded to their corresponding Unicode code point. So for example, you could test how null characters are processed by the URL parser by using the input <samp>test:\u{0000}</samp>.
</details>

<h2>Browser's URL components</h2>

<table class="output" id="browser-output">
  <tr class="href"><th>href</th><td></td></tr>
  <tr class="protocol"><th>protocol</th><td></td></tr>
  <tr class="username"><th>username</th><td></td></tr>
  <tr class="password"><th>password</th><td></td></tr>
  <tr class="port"><th>port</th><td></td></tr>
  <tr class="hostname"><th>hostname</th><td></td></tr>
  <tr class="pathname"><th>pathname</th><td></td></tr>
  <tr class="search"><th>search</th><td></td></tr>
  <tr class="hash"><th>hash</th><td></td></tr>
  <tr class="origin"><th>origin</th><td></td></tr>
</table>

<p class="output error" id="browser-error"></p>

<h2>jsdom/whatwg-url's components</h2>

<table class="output" id="jsdom-output">
  <tr class="href"><th>href</th><td></td></tr>
  <tr class="protocol"><th>protocol</th><td></td></tr>
  <tr class="username"><th>username</th><td></td></tr>
  <tr class="password"><th>password</th><td></td></tr>
  <tr class="port"><th>port</th><td></td></tr>
  <tr class="hostname"><th>hostname</th><td></td></tr>
  <tr class="pathname"><th>pathname</th><td></td></tr>
  <tr class="search"><th>search</th><td></td></tr>
  <tr class="hash"><th>hash</th><td></td></tr>
  <tr class="origin"><th>origin</th><td></td></tr>
</table>

<p class="output error" id="jsdom-error"></p>

<footer>
  <a href="https://github.com/jsdom/whatwg-url/tree/master/live-viewer">Fork me on GitHub!</a>
</footer>
